<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-滚动监听-body主体演示</title> 
</head>

<body>
    <h3>Vue-滚动监听- <i>body</i> 主体演示</h3>
    <div id="vue">
        <div>
            <p v-for="(item,index) in JiaZaiObj.Datas" :key="index">{{item}}</p>
            <p>{{JiaZaiObj.GetDataStatusStr}}</p>
        </div>
    </div>
    <script src="./js/vue2.6.14.min.js"></script>
    <script type="module">
        import "./js/JJYChengScrollListening.js"
        // console.log(JJYChengScrollListeningFun)
        var VueObject = new Vue({
            el: '#vue',
            data: {
                JiaZaiObj: {
                    Datas: [],//数据
                    PageInfo: {
                        pageIndex: 1, //页码
                        pageSize: 25, //条数（每页多少条）
                        total: 0,//总条数
                    },//页码
                    GetDataStatus: true,//是否加载数据
                    GetDataStatusStr: '加载中...',
                },
                jjySLObj: '',
            },
            created: function () { 
            },
            //挂载完成
            mounted: function () {
                console.log("mounted");
                this.StartFun();
                this.GetDataFun();
            },
            methods: {
                StartFun: function () {
                    var that = this;
                    that.jjySLObj = JJYChengScrollListeningFun({
                        domIdName: '',//为空则监听整个页面
                        distance: 100,//距离底部多少开始加载
                        IsDisabled: false,//是否停止
                        CallBackFun: function (res) {
                            console.log('html回调=============', res);
                            console.log('that.jjySLObj=============', that.jjySLObj);
                            that.GetDataFun();
                        },//回调方法
                    });
                },
                //获取数据
                GetDataFun: function () {
                    var that = this;
                    if (that.JiaZaiObj.PageInfo.pageIndex > 5) {
                        that.JiaZaiObj.GetDataStatus = false;
                        that.JiaZaiObj.GetDataStatusStr = '没有更多了...';
                        return false;
                    }
                    else {
                        that.JiaZaiObj.GetDataStatus = true;
                        that.JiaZaiObj.GetDataStatusStr = '数据加载中...';
                    }

                    console.warn('处理数据中...', that.jjySLObj)

                    if (that.jjySLObj) {
                        that.jjySLObj.SetIsDisabled(true);//停止处理
                    }

                    //定时器是为了模拟ajax的数据请求
                    setTimeout(function () {

                        for (let index = 0; index < that.JiaZaiObj.PageInfo.pageSize; index++) {
                            that.JiaZaiObj.Datas.push('【' + that.JiaZaiObj.PageInfo.pageIndex + '】--' + index);
                        }
                        that.JiaZaiObj.PageInfo.pageIndex++;//增加页码

                        console.warn('处理数据完毕！')
                        if (that.jjySLObj) {
                            that.jjySLObj.SetIsDisabled(false);//开启处理
                        }

                    }, 1 * 1000);
                },
            }
        });
    </script>
</body>

</html>